<template>
    <TabShow>{{ tabItems[i].content }}</TabShow>
    <TabBar>
        <TabItem
            v-for="(item, index) in tabItems"
            :key="index"
            :icon="item.icon"
            :label="item.label"
            :isDot="item.isDot"
            :msgNum="item.msgNum"
            :color="item.color"
            :isActive="item.isActive"
            @blueColor="handleClick(index)"
        ></TabItem>
    </TabBar>
</template>
<script setup>
import TabBar from "./components/TabBar.vue";
import TabItem from "./components/TabItem.vue";
import TabShow from "./components/TabShow.vue";
import { ref,provide } from "vue";
let i = ref(0);
const highLightColor = ref("#3494e4");
provide("highLightColor",highLightColor);
const tabItems = ref([
    {
        icon: "icon-home",
        label: "首页",
        isActive: true,
        content: "首页内容",
        isDot: false,
        msgNum: 10,
        color:'red'
    },
    {
        icon: "icon-search",
        label: "搜索",
        isActive: false,
        content: "搜索内容",
        isDot: false,
    },
    {
        icon: "icon-lianxiren",
        label: "联系",
        isActive: false,
        content: "联系内容",
        isDot: false,
    },
    {
        icon: "icon-shezhi",
        label: "设置",
        isActive: false,
        content: "设置内容",
        isDot: true,
        color:'pink'
    },
]);
function handleClick(index) {
    tabItems.value.forEach((item) => {
        item.isActive = false;
    });
    tabItems.value[index].isActive = !tabItems.value[index].isActive;
    i.value = index;
}
</script>
<style scoped>
body {
    background: rgb(188, 185, 185);
}
</style>
